<template>
  <div v-title="'订单审核 - 世外生活运营平台'" class="MkOrderAuditMgt">
    <mk-breadcrumb  :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <div class=" el-tabs globalTabsStyle">
      <el-tabs v-model="clickFlowTab" @tab-click="handleClick">
        <el-tab-pane label="待审核" name="first">
          <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
          <MkWaitAuditOrder :clickFlowTab="clickFlowTab"></MkWaitAuditOrder>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="second">
          <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
          <MkFinishAuditOrder :clickFlowTab="clickFlowTab"></MkFinishAuditOrder>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
  import MkWaitAuditOrder from './MkWaitAuditOrder.vue'
  import MkFinishAuditOrder from './MkFinishAuditOrder.vue'
  import {mapState} from 'vuex'
  export default {
    name: 'MkOrderAuditMgt',
    methods: {
      handleClick() {
      },
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightBig: state => state.global.fixedHeightBig,
    }),
    data () {
      return{
        clickFlowTab: 'first',
        breadcrumbData:{
          list:[
            {name:'订单管理',path: null, clickAble: false},
            {name: '订单审核',path: null, clickAble: false},
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'order-icon',
        }
      }
    },
    components:{
      MkBreadcrumb, MkWaitAuditOrder, MkFinishAuditOrder
    },
    mounted: function() {
      if(this.$route.query.tab){
        this.clickFlowTab = this.$route.query.tab;
      }
    },
    watch: {
    },
  }
</script>
<style lang="less">
  @import '../../assets/style/main.less';
  .MkOrderAuditMgt{
    .breadcrumb-box{
      -moz-box-shadow:none;
      -webkit-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
    }
    .el-table__expanded-cell{
      color: #81939E;
      padding: 0 30px;
      padding-top: 18px;
      .el-form-item{
        margin: 0;
        .el-form-item__label{
          padding-right: 0;
        }
      }
      .order_item{
        margin-right: 40px;
      }
      p{
        padding: 0 20px;
        .el-form-item__content{
          line-height: 35px;
          position:relative;
          vertical-align: middle;
        }
      }
      p:last-child{
        border-top: 1px solid rgba(218,222,223,0.5);
        line-height: 50px;
        margin-top: 18px;
      }
    }
    .el-table__expand-icon{
      height: 60px;
      .el-icon{
        margin-left: -8px;
        margin-top: -8px;
      }
    }
  }
</style>
